<template>
    <view class="a-page">
        <view class="a-cell">
            <view class="a-cell-value">
                <button type="button" @click="show('bottom')">底部</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-value">
                <button type="button" @click="show('left')">左边</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-value">
                <button type="button" @click="show('right')">右边</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-value">
                <button type="button" @click="show('top')">上面</button>
            </view>
        </view>
        <my-popup v-model="popupVisible" :dir="dir" title="这里是标题" header height="40vh">
            <view @click="hide" class="a-button-primary">关闭</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view>这里是弹层内容</view>
            <view @click="hide" class="a-button-primary">关闭</view>
        </my-popup>
    </view>
</template>

<script>
    import MyPopup from "../../components/my-popup";

    export default {
        name: "popup",
        components: {MyPopup},
        data() {
            return {
                popupVisible: false,
                dir: 'bottom'
            }
        },
        onNavigationBarButtonTap() {

        },
        onLoad() {
        },
        methods: {
            show(dir) {
                this.dir = dir;
                this.$nextTick(() => {
                    this.popupVisible = true;
                });
            },
            hide() {
                this.popupVisible = false;
            }
        },
    }
</script>

<style scoped lang="less">
</style>
